import React, { Component } from 'react'
import {
    Modal,
} from 'react-bootstrap';
import FormSelect from '../../../core/components/form.select';
import FormInput from '../../../core/components/form.input';
import { Get, Post } from '../../../core/utils/fetch';
import Dialog from '../../../core/utils/dialog';

class UserEdit extends Component {

    static defaultProps = {
        id: "",
        isShow: false,
    };

    state = {
        isShow: this.props.isShow,
        userData: {
            password: 'huiruide@666',
        },
    };

    componentWillReceiveProps = (props) => {
        this.setState({ isShow: props.isShow });
        if (props.id) {
            this._get(props.id)
        } else {
            this.setState({ userData: { password: 'huiruide@666' } });
        }
    };

    render() {
        let { userData } = this.state;
        return (
            <Modal show={this.state.isShow} keyboard={true} enforceFocus={false}>
                <Modal.Header>
                    <Modal.Title>{this.props.id ? '更新账号' : '新增账号'}</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <form>
                        <FormInput label="账号名称" name="loginName" dataItem={userData}></FormInput>
                        <FormInput label="使用人员" name="userName" dataItem={userData}></FormInput>
                        {this.props.id ? null : <FormInput disabled={true} label="密码" name="password" dataItem={userData}></FormInput>}
                        <FormSelect className="has-success" label="用户角色" name="role" dataItem={userData} dataUrl="/api/enums/Role" dataHandler={this._dataHandler}></FormSelect>
                        <FormInput label="联系方式" name="mobilePhone" dataItem={userData}></FormInput>
                    </form>
                </Modal.Body>
                <Modal.Footer>
                    <button type="button" className="btn btn-default" onClick={this._close}>关闭</button>
                    <button type="button" className="btn btn-primary" onClick={this._save}>确定</button>
                    {this.props.id ? <button type="button" className="btn btn-danger" onClick={this._reset}>重置密码</button> : null}
                </Modal.Footer>
            </Modal>
        )
    }

    _close = () => {
        this.setState({ isShow: false });
        this.props.onClose();
    };

    _get = (id) => {
        Get(`/spi/user/info/${id}`)
            .then((userData) => {
                this.setState({ userData });
            });
    };

    _dataHandler = (r) => {
        for (var key in r) {
            return { name: r[key], value: key };
        }
    };

    _reset = () => {
        Dialog.confirm('确定重置密码吗?', () => {
            Get(`/spi/user/reset/${this.props.id}/pwd`)
                .then(() => {
                    Dialog.alert('已重置');
                });
        });
    };

    _save = (id) => {
        let { userData } = this.state;
        Post(userData.id ? '/spi/user/update' : '/spi/user/add', userData)
            .then(() => {
                if (userData.id) {
                    Dialog.alert('更新成功');
                } else {
                    Dialog.alert('添加成功');
                }
                this.props.onEdit();
                this._close();
            });
    };
}

export default UserEdit